<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>领导专门看饼图的页面</title>

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

    <script>
			$(function(){
				
				//1 发送ajax请求
				var url='http://localhost:8080/attendance-service/class/find.do?method=cake';

				send(url,null,function(datas){
					var dataCake=datas.data;

					var option = {
						  tooltip: {
							trigger: 'item'
						  },
						  legend: {
							top: '5%',
							left: 'center'
						  },
						  series: [
							{
							  name: 'Access From',
							  type: 'pie',
							  radius: ['40%', '70%'],
							  avoidLabelOverlap: false,
							  itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2
							  },
							  label: {
								show: false,
								position: 'center'
							  },
							  emphasis: {
								label: {
								  show: true,
								  fontSize: '40',
								  fontWeight: 'bold'
								}
							  },
							  labelLine: {
								show: false
							  },
							  data: [
							  ]
							}
						  ]
						};



					//{ value: 1048, name: 'Search Engine' }
					for(var index=0;index<dataCake.length;index++){
						var cakeDTO=dataCake[index];
						var userName=cakeDTO.userName;
						var counter= cakeDTO.counter;

						var cake={}
						cake.value=counter;
						cake.name=userName;
						option.series[0].data.push(cake);
						//var xx = option.series[0].data;
					}

					var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);

                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }
				});
			});
		

    </script>

</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 500px"></div>

</body>
</html>
